import React,{Component} from 'react'
import Pages from '../Pages'
import * as pub from '../../config/public'
import {Spin,message,Button} from 'antd'
import * as fetch from '../../config/fetch'
import Layer from '../Layer'
class Goods extends Component {
	constructor(props) {
		super(props);
		this.state = {
			goodList:this.props.IntegralShopList?this.props.IntegralShopList:[],
			showLayer:false,
			exchangeIntegral:'',
			shopName:'',
			shopId:'',
			score:this.props.score?this.props.score:0
		}
	}
    componentWillUpdate(nextProps) {
        if (nextProps.IntegralShopList !== this.props.IntegralShopList) {
            this.setState({
				goodList:nextProps.IntegralShopList,
				score:nextProps.score,
			})
        }
    }
	shouldComponentUpdate(nextProps, nextState) {
        return pub.shouldComponentUpdate(nextProps, nextState, this.props, this.state);
    }
	showModel(exchangeIntegral,shopName,shopId){
		this.setState({
	        exchangeIntegral,
	        shopName,
	        showLayer:true,
	        shopId
	    })
	}
	hideModel(){
		this.setState({
			showLayer:false
		})
	}
	submit(){
		pub.loading(this,true);
        fetch.integralChange({shopId:this.state.shopId}).then((data) => {
			if(data.result==='RC100'){
				this.props.fetchIntegralList()
				this.setState({
					showLayer:false,
				},()=>{
					message.success(data.errMsg, 3);
					this.props.load(1);
				})
			}else{
                message.error(data.errMsg, 3);
			}
			 pub.loading(this,false);
		},(res)=>{
			pub.loading(this,false);
			pub.reject(res);
		})
	}
	render(){
		return(
			<ul className="clearFix">
			{this.state.goodList.map((item,index)=>{
					return(
						<li key={index}>
							{
								item.redeemCode?
								<div className="code-hide">
									{
										item.userShopIsBuy.isBuy===1?
										<span>{item.redeemCode}</span>:
										<span>密</span>
									}
								</div>
								:<img src={pub.getFile(item.shopCover)} alt='goods'/>
							}
							<div className="good-details">
								<p className="name">{item.shopName?item.shopName:''}</p>
								<p className="integral">兑换积分：<span>{item.exchangeIntegral?item.exchangeIntegral:''}</span></p>
								{item.redeemCode?null:<p className="number">库存量：&emsp;<span>{item.stock?item.stock:''}</span></p>}
								{
									item.userShopIsBuy.isBuy===1?
									<a>已兑换</a>:
									<a onClick={()=>this.showModel(item.exchangeIntegral,item.shopName,item.shopId)}>兑换</a>
								}
							</div>
						</li>
					)
			})}
			<Layer 
				title = "确认兑换"
				show={this.state.showLayer} 
				hide={this.hideModel.bind(this)}
				width="400px"
				height="270px"
			>
					<div className="row">
							<div className="pop-box-1">											
								<p>商品名称：{this.state.shopName}</p>											
								<p>兑换积分：{this.state.exchangeIntegral}</p>											
								<p>可用积分：{this.state.score}</p>										
							</div>
							<div className="pop-btn">
								<Button loading={this.state.loading} onClick={()=>this.hideModel()} className="btn btn-blue">取消</Button>
								<Button loading={this.state.loading} className="btn btn-blue" onClick={()=>this.submit()}>确认</Button>
							</div>
						</div>
			</Layer>
		    </ul>		
			)
	}
}
class PointShop extends Component {
	constructor(props) {
		super(props);
		this.state={
			jumpPage: 1,
			totalPage:0,
			IntegralShopList:[],
			loading : false,
			poinShoptText:'',
			bookTypeCode:'',
			bookTypes:[],
			showLayer:false,
			score:0
		}
	}
	fetchIntegralList(){
		pub.loading(this,true);
        fetch.integralList({pageno:this.state.jumpPage,commodityType:this.state.bookTypeCode,shopName:this.state.poinShoptText}).then((data) => {
		  if(data.result==='RC100'){
			this.setState({
				IntegralShopList:data.IntegralShopList?data.IntegralShopList:[],
				totalPage:data.totalPage?data.totalPage:0,
				score:data.score?data.score:0
			});
		  }else{
			  message.error(data.errMsg, 3); 
		  }
			pub.loading(this,false);
		},(res)=>{
			pub.loading(this,false);
			pub.reject(res);
		})
	}
	classTypes(){
		fetch.goodType({pid:0}).then((data)=>{
			if (data.result === 'RC100') {
				this.setState({
					bookTypes: data.categoriesList?data.categoriesList:[],
				})
			} else {
				message.error(data.errMsg, 3);
				this.setState({
					bookTypes:[]
				})
			}
		},(res) => {
			this.setState({
					bookTypes:[]
		   })
			pub.reject(res);
		})
	}
     componentDidMount() {
		this.fetchIntegralList();
		this.classTypes();
	}
	jump(page) {
		this.setState({
			jumpPage:page
		},function(){
			this.fetchIntegralList();
		}
		);
	}
	pSTextChange(event){
		if(event.target.value.length<=20){
			this.setState({poinShoptText: event.target.value});
		}else{
			event.target.value="";
			message.warning('商品名称不能超过20字！')
		}
	}
	submitText(){
		this.fetchIntegralList();
	}
	handleChange(event){
		this.setState({
			bookTypeCode:event.target.value,
		},function(){
            this.fetchIntegralList();
		})
	}
	load(value){
		if(value===1){
			this.setState({
				showLayer:false,
			})
		}
	}
	render(){
		return(
			<div>
					<div className="row">
					   <div className="common-title">
						<span>积分商城</span>
						<div className="filter-search floatR shop-search">
							<input type="text"  placeholder="商品名称" value={this.state.poinShoptText} onChange={this.pSTextChange.bind(this)} />
							<a className="btn search-btn" onClick={this.submitText.bind(this)}><i className="icon-search"></i></a>
						</div>
						<div className="filter-select floatR shop-search" style={{paddingTop:'11px'}}>
							<select onChange={this.handleChange.bind(this)} value={this.state.bookType}>
								             <option key={0} value={''}>全部</option> 
                                    {
									    this.state.bookTypes.map((item,index)=>{
											return(
                                               <option key={item.code} value={item.code}>{item.name}</option>
											)
									    })
								    }	
							</select>
						</div>
					   </div>
					   <div className="goods-list">
                          <Spin spinning={this.state.loading} tip="加载列表中...">
					         <Goods IntegralShopList={this.state.IntegralShopList} score={this.state.score} load={this.load.bind(this)} fetchIntegralList={this.fetchIntegralList.bind(this)}/>
                          </Spin>
					   </div>

					</div>

					<div className="line"></div>
					<Pages totalPage={this.state.totalPage} jump={this.jump.bind(this)} />
			</div>
			)
	}
}
export default PointShop;